<template>
  <div class="home">
    <!-- HeadBar -->
    <HeadBar></HeadBar>
    <!-- PlayerBar -->
    <PlayerBar></PlayerBar>
    <!-- Menu -->
    <Menu></Menu>
    <!-- RouterView -->
    <transition name="slide">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
import HeadBar from "@/components/HeadBar.vue";
import Menu from "@/components/Menu.vue";
import PlayerBar from '@/components/PlayerBar';

export default {
  created() {
  },
  data() {
    return {
      menu_height: 0,
      showMenu: true
    }
  },
  name: "home",
  components: {
    HeadBar,
    Menu,
    PlayerBar
  }
};
</script>

<style lang="scss" scoped>
.home{
  position: relative;
  z-index: 2;
}
.menu{
  width: 100px;
  // height: 100px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.slide-enter {
  opacity: 0;
}
.slide-enter-to {
  opacity: 1;
}
.slide-enter-active {
  transition: 1s;
}
.slide-leave {
  opacity: 1;
}
.slide-leave-to {
  opacity: 0;
}
.slide-leave-active {
  transition: 1s;
}
</style>
